<template>
  <div class="app-container">
    <!--集团管理头部展示区-->
    <div class="top">
      <el-button v-for="(item,index) in btnStr" :key="'bloc'+index" type="primary" round style="width: 124px;height: 32px;margin-right: 10px" @click="clickFunction(item)">
        {{ item }}
      </el-button>
      <br />
      <el-input
        v-for="(item,index) in iptStyle"
        :key="index"
        style="width: 200px;height: 36px;margin: 30px 10px 0px 0px"
        :placeholder="item.str"
        :suffix-icon="item.icon"
      >
      </el-input>
    </div>
    <div class="center">
      <el-button type="primary" round style="width: 120px;height: 36px;font-size: 18px">搜索</el-button>
      <el-button round style="width: 120px;height: 36px;font-size: 18px;color: #fff;background: #2EC9C7">导出</el-button>
      <el-button round style="width: 68px;height: 36px;font-size: 18px">列</el-button>
    </div>
    <div class="bottom">
      <el-table ref="table" :data="tableData" size="small" style="width: 100%;">
        <el-table-column type="selection" width="55" checked="true"></el-table-column>
        <el-table-column prop="id" width="159" label="集团编号"></el-table-column>
        <el-table-column
          prop="groupName"
          width="150"
          label="集团门诊名称"
        >
          <template slot-scope="scope">
            <a
              style="color: #719DC9;text-decoration:underline"
              @click="blocDetail(scope.row)"
            >{{ scope.row.groupName }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="clinicCount" width="120" label="旗下门诊数量"></el-table-column>
        <el-table-column prop="doctorCount" width="135" label="旗下医生数量">
          <template slot-scope="scope">
            <a
              style="color: #719DC9;text-decoration:underline"
            >{{ scope.row.doctorCount }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="patientCount" width="170" label="旗下患者数量">
          <template slot-scope="scope">
            <a
              style="color: #719DC9;text-decoration:underline"
            >{{ scope.row.patientCount }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="groupType" width="150" label="诊所类型"></el-table-column>
        <el-table-column prop="userId" width="150" label="集团管理员"></el-table-column>
        <el-table-column prop="userId" width="150" label="集团账单管理员"></el-table-column>
        <el-table-column prop="signContractFlagStr" width="150" label="是否签合同"></el-table-column>
        <el-table-column prop="contractEndData" width="150" label="合同截止时间"></el-table-column>
        <el-table-column prop="packageRuleName" width="150" label="套餐规则"></el-table-column>
        <el-table-column prop="productRuleName" width="150" label="产品规则"></el-table-column>
        <el-table-column prop="createDate" width="150" label="创建时间"></el-table-column>
        <el-table-column prop="statusStr" width="150" label="合作状态"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { operQuery, operQueryOne } from '@/api/oper';
export default {
  name: 'Bloc',
  data() {
    return {
      btnStr: ['创建集团门诊', '编辑集团门诊', '规则配置', '暂停合作', '导出诊所'],
      iptStyle: [
        {
          str: '集团编号',
          icon: 'el-icon-search'
        },
        {
          str: '集团名称',
          icon: 'el-icon-search'
        },
        {
          str: '合作状态',
          icon: 'el-icon-arrow-down'
        },
        {
          str: '是否签合同',
          icon: 'el-icon-arrow-down'
        },
        {
          str: '创建合同',
          icon: 'el-icon-date'
        }
      ],
      tableData: [],
      blocId: []
    };
  },
  created() {
    operQuery().then(res => {
      this.tableData = res.content;
    });
  },
  methods: {
    blocDetail(row) {
      operQueryOne(row.id).then(res => {
        res = JSON.stringify(res);
        this.$router.push(
          { path: 'details', query: { blocDetail: res } }
        );
      });
    },
    clickFunction(item) {
      if (item === '暂停合作') {
        console.log(this.blocId);
      }
    }
  }
};
</script>

<style scoped>
  .top {
    width: 100%;
    height: 125px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
  }

  .bottom {
    margin-top: 20px;
  }
</style>
